<template>
  <el-dialog title="出库审核" :visible.sync="visible" :center="true" width="70%" :close-on-click-modal="false">
    <el-row>
      <el-col>单位:{{ company }}</el-col>
      <el-col>日期:{{ date }}</el-col>
    </el-row>
    <el-table :data="reviewOutboundData" :border="true" size="mini">
      <el-table-column label="序号" type="index" min-width="5%"></el-table-column>
      <el-table-column label="名称" prop="name" min-width="20%"></el-table-column>
      <el-table-column label="物料编码" prop="code" min-width="10%"></el-table-column>
      <el-table-column label="规格/型号" prop="model" min-width="30%"></el-table-column>
      <el-table-column label="单位" prop="unit" min-width="5%"></el-table-column>
      <el-table-column label="数量" prop="number" min-width="5%"></el-table-column>
      <el-table-column label="项目号" prop="project" min-width="25%"></el-table-column>
      <el-table-column label="价税合计" prop="totalPriceTax" v-if=false></el-table-column>
      <el-table-column label="税率" prop="taxRate" v-if=false></el-table-column>
      <el-table-column label="未税单价" prop="unitPriceBeforeTax" v-if=false></el-table-column>
      <el-table-column label="未税金额" prop="amountBeforeTax" v-if=false></el-table-column>
      <el-table-column label="出库地点" prop="positionName" v-if=false></el-table-column>
      <el-table-column label="保管人" v-if=false></el-table-column>
    </el-table>
    <el-row>
      <el-col>领用人:{{ recipient }}</el-col>
      <el-col>审核:{{ reviewer }}</el-col>
      <el-col>出库:</el-col>
    </el-row>
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>审批记录</span>
      </div>
      <el-timeline style="padding: 0 !important;">
        <el-timeline-item
            v-for="(item, index) in processCommentArray"
            :key="index"
            :timestamp=item.taskName placement="top">
          <div class="timelineDiv">
            <h4>{{ item.userId }}&nbsp;:&nbsp;{{ item.message }}</h4>
            <h4>{{ item.time }}</h4>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-card>
    <el-row>
      <el-col :span="24">
        <el-input type="textarea" size="mini" rows="3" placeholder="请填写处理意见"
                  v-model="approvalComment"></el-input>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="agree" size="mini">同意</el-button>
      <el-button size="mini" type="warning" @click="rollback">退回</el-button>
      <el-button type="primary" @click="reviewClose" size="mini">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "ReviewOutbound",
  data() {
    return {
      company: '赛福斯特',
      date: new Date().toISOString().slice(0, 10),
      reviewer: '',
      reviewOutboundData: [],
      approvalComment: '',
      recipient: '',
      processCommentArray: [],
    }
  },
  computed: {
    visible: {
      get() {
        return this.$store.state.isVisible;
      },
      set(value) {
        this.$store.commit('setIsVisible', value);
      }
    },
  },
  watch: {
    visible(newVal) {
      console.log('Visible changed to: ', newVal);
    }
  },
  methods: {
    agree(){
      this.approvedOutbound("agree")
      this.visible = false
    },
    rollback() {
      this.approvedOutbound("reject")
      this.visible = false
    },
    approvedOutbound(approvalResult) {
      const outboundReviewed = {
        outboundMaterialDTOS: this.reviewOutboundData.map(item => ({
          ...item,
          reviewer: this.reviewer
        })),
        approvalCommentDTO: {
          comment: this.approvalComment
        },
        approvalResult: approvalResult
      }
      this.$http.post("/material/approveOutbound/", outboundReviewed).then((response) => {
        if (response.data.code == 1) {
          // 根据不同的审批结果，显示不同的提示
          let msg = '';
          if (approvalResult === "agree") {
            msg = '审核通过，下一步执行人:赵红玉';
          } else if (approvalResult === "reject") {
            msg = '流程已退回至领用人';
          } else {
            msg = '操作成功';
          }
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          });
          this.$store.commit("setTaskCompleted", true)
        } else {
          this.$message({
            showClose: true,
            message: '出库失败，请联系管理员',
            type: 'error'
          });
        }
      })
      this.visible = false
    },
    reviewClose() {
      this.visible = false
    }
  },
  mounted() {
    const taskId = this.$store.state.taskId
    this.$http.get(`/material/outbound/${taskId}`).then((response) => {
      if (response.data.code == 1) {
        this.reviewOutboundData = response.data.data.map(item => ({
          ...item,
          totalPriceTax: (Math.round(item.unitPriceBeforeTax * (1 + item.taxRate) * item.number * 100) / 100).toFixed(2),
          amountBeforeTax: (Math.round(item.unitPriceBeforeTax * item.number * 100) / 100).toFixed(2)
        }));
        this.recipient = this.reviewOutboundData[0].recipient
        this.reviewer = JSON.parse(localStorage.user).nickName
        console.log(this.reviewOutboundData)
        this.visible = true
      } else {
        console.log("获取申请出库数据失败")
      }
    })
    this.$http.get(`/history/comment/${taskId}`).then((response) => {
      if (response.data.code == 1) {
        this.processCommentArray = response.data.data
      }
    })
  }
}
</script>

<style scoped>

</style>